<template>
  <div class="top clearfix">
    <form class="video-upload-form" :class="formStatus" ref="form">
      <!--<span class="file-name">ss与zz.avi</span>-->
      <span class="status">{{msg[status].status}}</span>
        <label class="reupload" for="vusFileInput">
            {{msg[status].reupload}}
        </label>
        <input id="vusFileInput" v-show="!uploading" type="file" name="file" class="hidden-file-input" @change="uploadFileChange" >
    </form>
  </div>
</template>

<script>
import {postMedia} from 'utils/api.js';
import Tools from 'utils/tools.js';

export default {
  name: 'videoUploadStatus',
  props: ['status'],
  data() {
    return {
      uploading: false,
      msg: {
        standby: {
          status: '请上传视频',
          reupload: '点击上传'
        },
        uploaded: {
          status: '上传成功',
          reupload: '重新上传'
        },
        error: {
          status: '上传失败',
          reupload: '重新上传'
        }
      }
    };
  },
  computed: {
    formStatus(){
      let cl = {};
      cl[this.status] = true;
      return cl
    }
  },
  methods: {
    async uploadFileChange(e) {
      let fileName = e.target.value;
      let fileSize = 0;
      let lastModified = 0;
      if (!(/\.(mkv|avi|mp4|flv|mov|rmvb|rwmv)$/ig).test(fileName)) {
        this.$store.dispatch('alert', "文件必须为视频！");
        return false;
      }
      if (e.target.files) {
        let file = e.target.files[0];
        // if (!(/video/).test(file.type)) {
        //   this.$store.dispatch('alert', "文件必须为视频！");
        //   return false;
        // }
        if(file.size>2*1024*1024*1024){
          this.$store.dispatch('alert', "文件尺寸超过2G，请压缩后再试~");
          return false;
        }
        fileName = file.name;
        fileSize = file.size;
        lastModified = file.lastModified;
      }
      let userId = Tools.cookie.getItem('S_INFO').split('|')[0];
      let fakeMd5 = fileSize + lastModified + fileName + userId;
      //为IE9单独加个时间戳
      if (!window.FormData) {
        fakeMd5 += (new Date()).getTime()
      }
      let request;
      let before = (req) => {
        request = req;
        if(uploader){
          this.$store.dispatch('videoBeginUpload', {uploader, request});
        }
      };
      let uploader = await postMedia('uploadVideo', this.$refs.form, {
        before,
        query: {md5: Tools.md5(fakeMd5)},
        progress: this.setProgress,
        credentials: true,
        name: 'file'
      });
      this.uploading = true;
      this.$store.dispatch('videoBeginUpload', {uploader, request});
      
      this.$emit('reupload');
    },
    setProgress(e) {
      this.$store.dispatch('mediaSetUploadProgress', e.loaded * 100 / e.total);
    }
  },
  mounted() {
  }
};
</script>

<style lang="less">
</style>